extends layout
append scripts
    script.
        // 始终记住 DOM 是一个树形结构, 操作一个 DOM 节点实际上就是这么几个操作:
        // 更新: 更新该 DOM 节点的内容, 相当于更新了该 DOM 节点表示的 HTML 的内容
        // 遍历: 遍历该 DOM 节点下的子节点, 以便进行进一步操作
        // 添加: 在该 DOM 节点下新增一个子节点, 相当于动态增加了一个 HTML 节点
        // 删除: 将该节点从 HTML 中删除, 相当于删掉了该 DOM 节点的内容以及它包含的所有子节点
        // getElementsBy && querySelector
        var x = document.getElementById("main");  // by id
        var x = document.querySelector('#main');  // 通过 querySelector 获取 ID 节点, querySelector 更加方便
        var y = document.getElementById("main").getElementsByTagName("p");  // by name from id
        var y = x.querySelectorAll('p')  // 通过 querySelectorAll 获取 x 节点内的符合条件的所有节点
        console.log(y[0].innerHTML);
        x = document.getElementsByClassName("intro");  // by class
        console.log(x[0].innerHTML);
        console.log(x);  // 可以看到必须加 x[0]
        // child
        console.log(x[0].childNodes[0].textContent);  // 完全按照 dom 一步一步的往下找的
        console.log(x[0].firstChild);
        // change-css
        x[0].innerHTML = '贾瑞鹏万岁';
        x[0].style.color = 'blue';
        x[0].style.fontFamily="Arial";
        x[0].style.fontSize="larger";
        y[0].style.fontSize="40px";
block content
    head
    p 你好世界!
    p.intro 你好世界!
    #main
        p DOM 是非常有用的
